<template>
  <div class="mainControl">
    <VonCrumbs title="设备管理"></VonCrumbs>
    <div class="widget">
      <VonInput
        v-model="detail.value"
        width="260px"
        placeholder="搜索设备"
        @change="getDeviceList"
      ></VonInput>
      <el-button
        type="primary"
        size="small"
        @click="addDevice"
        class="addButton"
        >添加设备</el-button
      >
    </div>
    <div class="tableContent">
      <VonTable :column="column" :tableData="tableData">
        <el-table-column slot="operation" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: #1890ff"
              @click="editDevice(scope.row)"
            >
              编辑
            </el-button>
            <!-- <el-button
              type="text"
              size="small"
              style="color: #1890ff"
              @click="deleteDevice(scope.row)"
            >
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </VonTable>
    </div>
    <div v-if="isShow_Popup">
      <VonDialog
        :title="type == 1 ? '新增' : '编辑'"
        @cancelResult="cancelResult"
        @commitResult="commitResult"
        :isShow_Popup="isShow_Popup"
      >
        <div class="deviceForm" slot="content">
          <el-form ref="form" :model="form" label-width="48px">
            <el-form-item>
              <VonInput
                v-model="form.name"
                label="设备名称"
                width="460px"
                :readonly="form.route == 'deviceManage'"
              ></VonInput>
            </el-form-item>
            <el-form-item>
              <VonInput
                v-model="form.ip"
                label="IP地址"
                width="460px"
              ></VonInput>
            </el-form-item>
            <el-form-item v-if="form.route != 'deviceManage'">
              <VonSelect
                v-model="form.route"
                :options="options"
                label="设备类型"
                width="460px"
              ></VonSelect>
            </el-form-item>
            <el-form-item v-if="form.route != 'deviceManage'">
              <el-col :span="18">
                <VonInput
                  v-model="form.sopId"
                  label="SOP地址"
                  width="360px"
                ></VonInput>
              </el-col>
              <el-col :span="6">
                <el-upload
                  action=""
                  class="upload-demo"
                  :show-file-list="false"
                  :http-request="uploadSectionFile"
                  :limit="1"
                  :file-list="fileList"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
      </VonDialog>
    </div>
  </div>
</template>

<script>
import {
  createDevice,
  getDeviceListApi,
  deleteDevice,
  deviceUpdate,
} from "../../api/workStation/mainControl";
import { openLoading, closeLoading } from "../../common/prompt";
import { validateIP } from "../../common/index";
let formData = new FormData();
export default {
  name: "DeviceManage",
  data() {
    return {
      detail: {
        model: "",
        value: "",
      },
      type: 1,
      options: [
        {
          id: "1-6O",
          name: "预装配",
          ctrl: "1-6M",
        },
        {
          id: "7O",
          name: "自动拧紧",
          ctrl: "7M",
        },
        {
          id: "17O",
          name: "QC巡检",
          ctrl: "17M",
        },
        {
          id: "18-20O",
          name: "测试",
          ctrl: "7M",
        },
        {
          id: "21O",
          name: "人工拧紧",
          ctrl: "7M",
        },
        {
          id: "22O",
          name: "高度检测",
          ctrl: "22M",
        },
        {
          id: "23O",
          name: "附件安装",
          ctrl: "7M",
        },
        {
          id: "25O",
          name: "自动贴标",
          ctrl: "7M",
        },
        {
          id: "26O",
          name: "包装",
          ctrl: "26M",
        },
      ],
      fileList: [],
      form: {
        id: "",
        name: "",
        IP: "",
        SOP: "",
      },
      isShow_Popup: false,
      column: [
        {
          align: "center",
          label: "设备",
          prop: "name",
          width: "80",
        },
        {
          align: "center",
          label: "IP地址",
          prop: "ip",
        },
        {
          align: "center",
          label: "设备类型",
          prop: "routeName",
        },
        {
          align: "center",
          label: "SOP地址",
          prop: "sopId",
        },
      ],
      tableData: [],
    };
  },
  methods: {
    deleteDevice(row) {
      this.$confirm("是否确认操作？").then(() => {
        let { id } = row;
        deleteDevice({
          id,
        }).then((res) => {
          if (res.status == 200 || res.status == 204) {
            this.$message.success("删除成功");
            this.getDeviceList();
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    },
    uploadSectionFile(data) {
      formData.set("File", data.file);
      this.$set(this.form, "sopId", data.file.name);
    },
    cancelResult() {
      this.isShow_Popup = false;
    },
    commitResult() {
      if (!this.form.name) {
        this.$message.error("请填写名称");
        return;
      }
      if (!this.form.ip) {
        this.$message.error("请填写IP");
        return;
      }
      if (!validateIP(this.form.ip)) {
        this.$message.error("请正确输入IP");
        return;
      }
      if (!this.form.route) {
        this.$message.error("请填写设备类型");
        return;
      }
      let ApiMethod = "";
      if (this.type == 1) {
        ApiMethod = createDevice;
      } else {
        ApiMethod = deviceUpdate;
      }

      if (this.type == 2) {
        formData.set("Id", this.form.id);
      }
      formData.set("Name", this.form.name);
      formData.set("IP", this.form.ip);
      formData.set("Route", this.form.route);
      if (this.form.route != "deviceManage") {
        formData.set(
          "Ctrl",
          this.options.find((o) => o.id == this.form.route).ctrl
        );
      }

      openLoading("处理中...");
      ApiMethod(formData)
        .then((res) => {
          if (res.status == 200 || res.status == 204) {
            this.$message.success(this.type == 1 ? "新增成功" : "修改成功");
            this.getDeviceList();
          } else {
            this.$message.error(this.type == 1 ? "新增失败" : "修改失败");
          }
          formData = new FormData();
        })
        .catch(() => {
          formData = new FormData();
        });
      this.isShow_Popup = false;
      this.form = {
        name: "",
        IP: "",
        SOP: "",
      };
    },
    addDevice() {
      this.form = {};
      this.type = 1;
      this.isShow_Popup = true;
    },
    editDevice(row) {
      this.form = {
        ...row,
      };
      this.type = 2;
      this.isShow_Popup = true;
    },
    getDeviceList() {
      let params = {
        name: this.detail.value,
      };
      openLoading();
      getDeviceListApi(params).then((res) => {
        closeLoading();
        if (res.data && res.status == 200) {
          this.tableData = res.data;
          console.log(this.options);
          this.tableData.forEach((t) => {
            if (t.route != "deviceManage") {
              t.routeName = this.options.find((o) => o.id == t.route).name;
            }
          });
          console.log(this.tableData);
        } else {
          this.$message.error("查询数据失败");
        }
      });
    },
  },
  created() {
    this.getDeviceList();
  },
};
</script>

<style scoped lang="scss">
@import "../../style/mainControl";
</style>